<template>
	<swiper class="swiper" :indicator-dots="dots" :indicator-color="color" :indicator-active-color="activecolor"
		:autoplay="autoplay" :interval="3000" :duration="1000">
		<!-- 变量 swiperData -->

		<swiper-item class="swiper-item" v-for="(item,index) in data" :key="index" @tap="handleTapImg(item)">
					<image :src="item.img" :mode="mode" class="swiper-img"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: "l-swiper",
		/*接收参数*/
		props: {
			/*swiperList数据*/
			data: {
				type: Array,
				default: []
			},
			/*图片裁剪mode*/
			mode: {
				type: String,
				default: 'widthFix'
			},
			/*面板指示*/
			dots: {
				type: Boolean,
				default: false,
			},
			/*指示点颜色*/
			color: String,
			/*选中指示点颜色*/
			activecolor: String,
			/*自动播放*/
			autoplay: {
				type: Boolean,
				default: true,
			},

		},
		methods: {
			/*点击图片触发自定义事件*/
			handleTapImg(value) {
				this.$emit('tapSwiper', value)
			}
		},
	}
</script>

<style lang="scss">
	.swiper {
		box-sizing: border-box;

		height: 375rpx;
		width: 750rpx;
		background-color: #cccccc;
		.swiper-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			box-sizing: border-box;

			.swiper-img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
